<template>
  <div class="top-bar-container">
    <div class="vab-main">
      <el-row type="flex" style="justify-content: space-between;">
        <el-col :xl="3" :lg="4" :md="4" :sm="4" :xs="4">
          <logo />
        </el-col>
        <el-col :xl="19" :lg="13" :md="13" :sm="13" :xs="13">
            <div style="display: flex;justify-content: flex-end;">
              <el-menu
              :background-color="variables['menu-background']"
              :text-color="variables['menu-color']"
              :active-text-color="variables['menu-color-active']"
              :default-active="activeMenu"
              mode="horizontal"
              menu-trigger="hover"
            >
              <template v-for="route in menu">
                <side-bar-item
                  v-if="!route.hidden"
                  :key="route.path"
                  :full-path="route.path"
                  :item="route"
                ></side-bar-item>
              </template>
            </el-menu>
            <div class="right-panel">
              <!-- <error-log /> -->
              <full-screen-bar @refresh="refreshRoute"></full-screen-bar>
              <!-- <theme-bar class="hidden-md-and-down"></theme-bar> -->
              <vab-icon
                title="重载路由"
                :pulse="pulse"
                :icon="['fas', 'redo']"
                @click="refreshRoute"
              />
              <avatar></avatar>
            </div>
          </div>
        </el-col>
        <!-- <el-col :xl="2" :lg="2" :md="2" :sm="2" :xs="2">
          
        </el-col> -->
      </el-row>
    </div>
  </div>
</template>

<script>
  import SideBarItem from "../SideBar/components/SideBarItem";
  import variables from "@/styles/variables.scss";
  import { mapGetters } from "vuex";
  import {
    Avatar,
    ErrorLog,
    FullScreenBar,
    Logo,
    // ThemeBar,
  } from "@/layouts/components";

  export default {
    components: {
      Avatar,
      ErrorLog,
      FullScreenBar,
      // ThemeBar,
      SideBarItem,
      Logo,
    },
    data() {
      return {
        pulse: false,
        menuTrigger: "hover",
        menu: [],
      };
    },
    computed: {
      ...mapGetters({
        routes: "routes/routes",
        visitedRoutes: "tagsBar/visitedRoutes",
      }),
      activeMenu() {
        const route = this.$route;
        const { meta, path } = route;
        if (meta.activeMenu) {
          return meta.activeMenu;
        }
        return path;
      },
      variables() {
        return variables;
      },
    },
    mounted() {
      let tempMeun = [];
      let routeName = this.$route.path;
      let allRoute = this.$route.matched[0].path;
      for (let index = 0; index < this.routes.length; index++) {
        // 判断路由显示子路由
        const element = this.routes[index];
        if (element.redirect === routeName || element.redirect === allRoute) {
          this.menu = this.routes[index].children;
        }
      }
    },
    methods: {
      async refreshRoute() {
        this.$baseEventBus.$emit("reloadRouterView");
        this.pulse = true;
        setTimeout(() => {
          this.pulse = false;
        }, 1000);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .top-bar-container {
    display: flex;
    align-items: center;
    justify-items: flex-end;
    height: $base-top-bar-height;
    background: $base-menu-background;

    .vab-main {
      width: 98% !important;
      background: $base-menu-background;

      ::v-deep {
        .el-menu {
          &.el-menu--horizontal {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: $base-top-bar-height;
            border-bottom: 0 solid transparent !important;

            .el-menu-item,
            .el-submenu__title {
              padding: 0 40px;
              // margin: 0 25px;
            }

            @media only screen and (max-width: 767px) {
              .el-menu-item,
              .el-submenu__title {
                padding: 0 8px;
              }

              li:nth-child(4),
              li:nth-child(5) {
                display: none !important;
              }
            }

            > .el-menu-item {
              height: $base-top-bar-height;
              line-height: $base-top-bar-height;
            }

            > .el-submenu {
              .el-submenu__title {
                height: $base-top-bar-height;
                line-height: $base-top-bar-height;
              }
            }
          }

          svg {
            width: 1rem;
            margin-right: 3px;
          }

          &--horizontal {
            .el-menu {
              .el-menu-item,
              .el-submenu__title {
                height: $base-menu-item-height;
                line-height: $base-menu-item-height;
              }
            }

            .el-submenu,
            .el-menu-item {
              &.is-active {
                background-color: $base-color-blue !important;
                border-bottom: 0 solid transparent !important;

                .el-submenu__title {
                  border-bottom: 0 solid transparent !important;
                }
              }
            }

            > .el-menu-item {
              .el-tag {
                margin-top: calc(#{$base-top-bar-height} / 2 - 7.5px);
                margin-left: 5px;
              }

              @media only screen and (max-width: 1199px) {
                .el-tag {
                  display: none;
                }
              }

              &.is-active {
                background-color: transparent !important;
                border-bottom: 3px solid $base-color-blue !important;
              }
            }
          }
        }
      }
    }

    .right-panel {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: $base-top-bar-height;

      ::v-deep {
        .user-name {
          color: rgba($base-color-white, 0.9);
        }

        .user-name + i {
          color: rgba($base-color-white, 0.9);
        }

        svg {
          width: 1em;
          height: 1em;
          margin-right: 15px;
          font-size: $base-font-size-big;
          color: rgba($base-color-white, 0.9);
          cursor: pointer;
          fill: rgba($base-color-white, 0.9);
        }

        button {
          svg {
            margin-right: 0;
            color: rgba($base-color-white, 0.9);
            cursor: pointer;
            fill: rgba($base-color-white, 0.9);
          }
        }

        .el-badge {
          margin-right: 15px;
        }
      }
    }
  }
</style>
